<template>
  <div>
      <!-- <button @click="getData">发请求</button> -->
      <input type="text" placeholder="username" v-model="username">
      <input type="text" placeholder="password" v-model="password" @keyup.enter="register">
      <br>
      <button @click="getAll">all</button>
      <button @click="getRace">race</button>
      <div v-for="(item,index) in goodsList" :key="index">
          <img :src="item.img" alt="">
          <p>👍（{{item.like}}）</p>
          <p>{{item.text}}</p>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            goodsList: [],
            username: '',
            password: ''
        }
    },
    created() {
        this.getData()
    },
    methods: {
        register() {
            this.$http.post('/users/register', {
                // 在post请求中传参
                phone: 18938888888,
                code: 'r2b7',
                username: this.username,
                password: this.password,
            })
            .then(res => {
                console.log(res);
            })
            .catch(err => {
                console.log(err);
            })
        },
        getData() {
            let datas = {
                name: 'Tom',
                city: 'zhengzhou',
                date: '0527'
            }
            // get请求带参数的方式,相比post请求，多了一层params
            this.$http.get('/guid/new', {
                params: datas
            })
            .then(res => {
                this.goodsList = res;
                console.log(this.goodsList);
            })
            .catch(err => {
                console.log(err);
            })
        },
        // 并发请求1
        getReg() {
            let data = {
                phone: 18938888888,
                code: 'r2b7',
                username: this.username,
                password: this.password,
            };
            // 在post请求中传参
            return this.$http.post('/users/register', data)
        },
        // 并发请求2
        getPic() {
            return this.$http.get('/guid/new?nnn='+this.xxx+'&ff=3423')
        },
        // 全部执行完成 all------这里必须用原生的axios，不能用create得出的实例，实例上没这个方法
        getAll() {
            axios.all([this.getReg(), this.getPic()])
            .then(axios.spread((res1, res2)=>{
                console.log(res1, res2);
            }))
        },
        // 最快的那个完成---0.27版本不使用
        getRace() {
            this.$http.race([this.getReg(), this.getPic()])
            .then(res => {
                console.log(res);
            })
        }
    }
}
</script>

<style>

</style>